<template>
	<view class="app">
		<view class="u-flex search-div">
			<view class="search-box "><u-search @search="searchlist" :showAction="false" placeholder="请输入地址名称" v-model="obj.name"></u-search></view>
			<view class="u-flex-1 u-m-l-20"><u-button @click="addItem" type="primary" size="small" shape="circle">新增地址</u-button></view>
		</view>
		<u-gap height="120rpx"></u-gap>
		<view class="">
			<u-list @scrolltolower="scrolltolower" :scrollIntoView="o_id" height="calc(100vh - 120rpx)">
				<u-list-item v-for="(item, index) in List" :key="index" :id="'o_' + index">
					<view class="u-p-32 content-box u-flex">
						<view class="u-flex-3">
							<view class="u-flex u-flex-items-center">
								<u-tag class="u-m-r-20" plain size="mini" v-if="item.status == 1" text="默认"></u-tag>
								<u-text margin="10rpx 0" bold size="38rpx" :text="item.name"></u-text>
							</view>

							<u-text margin="10rpx 0" :text="item.linkman + ' ' + item.phone"></u-text>
							<u-text margin="10rpx 0" :text="item.district + item.address"></u-text>
						</view>
						<view class="u-flex " @click="showedit(index)"><u-icon size="20" name="edit-pen-fill"></u-icon></view>

						<u-transition :show="item.show" mode="fade">
							<view class="fixd-div">
								<u-grid :customStyle="'width:100%;flex-wrap: nowrap;'" :border="false" col="4">
									<u-grid-item @click.native.stop="handle(i, index)" v-for="(data, i) in btnList" :index="i" :key="i">
										<text class="iconfont  el-sc-bianji"></text>
										<text class="grid-text">{{ data.title }}</text>
									</u-grid-item>
								</u-grid>
								<view class="close-icon" @click="item.show = false"><u-icon size="20" color="#FFFFFF" name="close-circle"></u-icon></view>
							</view>
						</u-transition>
					</view>
				</u-list-item>
				<u-loadmore @loadmore="getDataList" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
			</u-list>
		</view>

		<u-modal :show="show_model" @cancel="show_model = false" :showCancelButton="true" @confirm="changestatus" ref="uModal" :asyncClose="true" :content="content"></u-modal>
		<lc-fab-touch ref="fab" :content="contents" horizontal="right" vertical="bottom" direction="horizontal" @trigger="trigger" />
	</view>
</template>
<script>
import {objextend} from '@/util/index.js';
export default {
	data() {
		return {
			obj: {
				name: ''
			},
			objTemp: {},
			total: 0,
			page: 1,
			size: 10,
			isLoading: false,
			List: [],
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '上拉或点击加载更多',
			nomoreText: '实在没有了',
			show_model: false,
			content: '',
			btnList: [
				{
					title: '设为默认'
				},
				{
					title: '编辑'
				},
				{
					title: '删除'
				}
			],
			btn_type: -1,
			o_id: '',
			contents: [
				{
					iconPath: 'arrow-up',
					selectedIconPath: 'arrow-up',
					text: '顶部',

					active: false
				},
				{
					iconPath: 'home',
					selectedIconPath: 'home-fill',
					text: '首页',
					active: false
				}
			]
		};
	},
	components: {},
	onLoad() {
		this.searchList();
	},
	onPullDownRefresh() {
		this.searchList();
	},
	methods: {
		trigger(e) {
			if (e.index == 0) {
				this.o_id = '';
				this.$nextTick(() => {
					this.o_id = 'o_0';
				});
			} else if (e.index == 1) {
				uni.$u.route({
					url: 'pages/index/index'
				});
			}
		},
		scrolltolower() {
			this.getDataList();
		},
		changestatus() {
			let id = this.List[this.index].id;
			if (this.btn_type == 0) {
				let _o = {
					id: id,
					status: 1
				};
				uni.$u.http
					.put('/shop/return/address/' + id, _o,{custom:{id:6}})
					.then(res => {
						this.show_model = false;
						this.searchList();
					})
					.catch(err => {});
			} else if (this.btn_type == 2) {
				uni.$u.http
					.delete('/shop/return/address/' + id, {},{custom:{id:6}})
					.then(res => {
						this.show_model = false;
						this.searchList();
					})
					.catch(err => {
						// this.getDataList()
					});
			}
		},
		changelist(id) {
			uni.$u.http
				.get('/shop/return/address/' + id,{custom:{id:6}})
				.then(res => {
					let detail = res.msg;
					// this.List[this.index] = detail;
					// // this.List[this.index].status = userdetail.status;
					// // this.List[this.index].update_time = userdetail.update_time;
					// this.List[this.index].show = false;
					this.List[this.index] = objextend(this.List[this.index], detail);
					this.List[this.index].show = false;
					this.show = false;
					this.show_model = false;
				})
				.catch(err => {});
		},
		showedit(i) {
			this.List.forEach(a => {
				a.show = false;
			});
			this.List[i].show = true;
		},
		//按钮集合
		handle(i, index) {
			this.index = index;
			this.btn_type = i;
			let id = this.List[index].id;
			let status = this.List[index].status;

			switch (i) {
				case 0:
					this.show_model = true;
					this.content = '是否设为默认?';
					break;
				case 1:
					this.editItem(id);
					break;
				case 2:
					this.show_model = true;
					this.content = '是否删除该地址?';
					break;
			}
		},
		//新增地址
		addItem() {
			let _this = this;
			uni.navigateTo({
				url: '/pages/setting/returnaddress/detail',
				events: {
					savesuccess: function(data) {
						_this.searchList();
					}
				}
			});
		},
		//查询数据
		searchList() {
			//复制查询对象
			this.objTemp = {...this.obj};
			this.List = [];
			this.page = 1;
			this.getDataList();
		},
		//查询数据本体
		getDataList() {
			this.isLoading = true;
			uni.$u.http
				.post('/shop/return/address/list?page=' + this.page + '&size=10', this.objTemp,{custom:{id:6}})
				.then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					let json = res.msg;
					if (json.data.length > 0) {
						this.page++;
						let list = json.data;
						list.forEach(a => {
							a.show = false;
						});
						this.List = this.List.concat(list);
					} else {
						this.status = 'nomore';
					}
				})
				.catch(e => {
					this.isLoading = false;
				});
		},

		//编辑数据
		editItem(id) {
			let _this = this;
			uni.navigateTo({
				url: '/pages/setting/returnaddress/detail?id=' + id,
				events: {
					savesuccess: function(data) {
						_this.changelist(id);
					}
				}
			});
		}
	}
};
</script>
<style lang="scss">
.content-box {
	margin: 20rpx auto;
	position: relative;
}
.search-box {
	width: 520rpx;
}
</style>
